{% extends "layout.html" %} {% block styles %}
<link rel="stylesheet" href="../../../static/sass/swiper-3.4.2.min.css">
<style>
  * {
    margin: 0;
    padding: 0;
    list-style: none;
    outline: none;
    text-decoration: none;
  }
  
  html {
    font-size: 100px;
  }
  
  .home {
    overflow: hidden;
  }
  
  .comicItem .spCss {
    display: inline-block;
    flex-direction: column;
    width: 1.05rem;
    white-space: normal;
  }
  
  .comicItem .comic-item {
    display: block;
  }
  
  .comicItem .comic-item .thumbnail {
    display: block;
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 133.33333%;
    border-radius: .03rem;
    box-sizing: border-box;
    background-size: cover;
    overflow: hidden;
    transform: rotate(0deg);
  }
  
  .comicItem .comic-item .thumbnail .check {
    position: absolute;
    right: .085rem;
    bottom: .085rem;
    width: .16rem;
    height: .16rem;
    background: url("../images/icons/selc.png") center no-repeat;
    background-size: cover;
    z-index: 49;
  }
  
  .comicItem .comic-item .thumbnail .checked {
    background: url("../images/icons/selc_hl.png") center no-repeat;
    background-size: cover;
  }
  
  .comicItem .comic-item .thumbnail img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
  }
  
  .comicItem .comic-item .score {
    position: absolute;
    top: 0;
    right: 0;
    height: .18rem;
    line-height: .18rem;
    padding: 0 .04rem 0 .09rem;
    border-radius: .09rem 0 0 .09rem;
    background-color: rgba(0, 0, 0, 0.5);
    color: #fff;
    font-size: .11rem;
  }
  
  .comicItem .comic-item .score:before {
    font-size: .10rem;
    vertical-align: middle;
    margin-right: .03rem;
  }
  
  .comicItem .comic-item .title,
  .comicItem .comic-item .chapter,
  .comicItem .comic-item .desc {
    display: block;
    height: .20rem;
    line-height: .20rem;
  }
  
  .comicItem .comic-item .chapter {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 100%;
    padding: 0 .05rem;
    text-align: right;
    font-size: .12rem;
    color: #fff;
    background-color: rgba(0, 0, 0, 0.5);
  }
  
  .comicItem .comic-item .title {
    height: .25rem;
    padding-top: .05rem;
    color: #333;
    font-size: .14rem;
  }
  
  .comicItem .comic-item .desc {
    font-size: .11rem;
    color: #999;
  }
  
  .content {
    background: #fff;
    border: .01rem solid #efefef;
    border-width: .01rem 0;
    padding: .1rem 0;
    margin-bottom: .1rem;
    background: #fff;
  }
  
  .content .hd {
    display: flex;
    height: .32rem;
    padding: 0 .125rem;
    align-items: flex-end;
    margin-bottom: .1rem;
  }
  
  .content .hd .hd-text {
    flex: 1;
    padding-left: .05rem;
  }
  
  .content .hd .hd-text .icon {
    display: inline-block;
    width: .3rem;
    height: .28rem;
    margin-right: .08rem;
    vertical-align: text-bottom;
    background-image: url("../images/sprite_img.png");
    background-size: .51rem 7.405rem;
    background-repeat: no-repeat;
  }
  
  .content .hd .hd-text .title {
    position: relative;
    bottom: -0.02rem;
    font-size: .2rem;
  }
  
  .content .hd .hd-text .summary {
    margin-left: .04rem;
    font-size: .12rem;
    color: #999;
    vertical-align: bottom;
  }
  
  .content .hd .more {
    display: block;
    height: .16rem;
    border: .01rem solid #f5f5f5;
    padding: 0 .04rem;
    line-height: .16rem;
    font-size: .11rem;
    color: #999;
    border-radius: .08rem;
  }
  
  .content .hd .more:before {
    font-size: .1rem;
    margin-right: .03rem;
    color: #ccc;
  }
  
  .content .hd .bd {
    white-space: nowrap;
    text-align: left;
  }
  
  .content .comic-item {
    margin-right: .1rem;
  }
  
  .fz16 {
    font-size: 0.16rem
  }
  
  .content .swiper-slide {
    width: auto !important;
    display: inline-block !important;
  }
  
  .tab-title-container {
    height: .45rem;
    position: relative;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    /*display: table;*/
    margin: 0 auto;
    outline: none;
    border-bottom: 1px solid #f5f5f5;
    display: -webkit-box;
    display: -moz-box;
    display: -o-box;
    display: -ms-flexbox;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    width: 100%;
    -webkit-appearance: none;
    text-decoration: none;
  }
  
  .tab-title {
    color: #999;
    font-size: .15rem;
    -webkit-appearance: none;
    height: .2rem;
    line-height: .2rem;
    position: relative;
    text-align: center;
    cursor: pointer;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    border-left: 1px solid #f5f5f5;
    /*    display: block;*/
  }
  
  .tab-content-container {
    overflow-y: hidden;
  }
  
  .tab-content-container span {
    display: block;
  }
  
  .tab-content-container .item {
    display: block;
    color: #333;
    background: #f6f3f0;
    margin: .2rem 0;
    padding: 0.075rem 0;
    position: relative;
    height: .55rem;
  }
  
  .tab-content-container .item:last-child {
    margin-bottom: .2rem;
  }
  
  .tab-content-container .item:nth-of-type(1) {
    background: #fc7365;
  }
  
  .tab-content-container .item:nth-of-type(1) span {
    color: #fff;
  }
  
  .tab-content-container .item:nth-of-type(1) .count::before {
    color: #fff;
  }
  
  .tab-content-container .item:nth-of-type(2) {
    background: #ff9f71;
  }
  
  .tab-content-container .item:nth-of-type(2) span {
    color: #fff;
  }
  
  .tab-content-container .item:nth-of-type(2) .count::before {
    color: #fff;
  }
  
  .tab-content-container .item:nth-of-type(3) {
    background: #ffc477;
  }
  
  .tab-content-container .item:nth-of-type(3) span {
    color: #fff;
  }
  
  .tab-content-container .item:nth-of-type(3) .count::before {
    color: #fff;
  }
  
  .tab-content-container .item:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
  }
  
  .tab-content-container .thumbnail {
    width: .6rem;
    height: .8rem;
    margin: -.2rem .125rem 0 .125rem;
    float: left;
    box-shadow: 0 0 0.025rem rgba(0, 0, 0, 0.3);
    border-radius: 0.03rem;
    transform: rotate3d(0deg);
    overflow: hidden;
  }
  
  .tab-content-container .title {
    height: .18rem;
    line-height: .18rem;
    font-size: .14rem;
    font-weight: bolder;
  }
  
  .tab-content-container .tags-box {
    height: .16rem;
    line-height: 1;
    margin-top: .02rem;
  }
  
  .tab-content-container .tags {
    display: inline-block;
    height: .12rem;
    line-height: .12rem;
    padding: .01rem .06rem;
    margin-right: .03rem;
    font-size: .095rem;
    background: rgba(0, 0, 0, 0.07);
    border-radius: 0.075rem;
    vertical-align: top;
  }
  
  .tab-content-container .count {
    font-size: .11rem;
    margin-top: .06rem;
  }
  
  .tab-content-container .count::before {
    font-size: .1rem;
    margin-right: .03rem;
    color: #999;
  }
  
  .tab-content-container .num {
    color: rgba(0, 0, 0, 0.07);
    font-size: .36rem;
    position: absolute;
    top: .1rem;
    right: .1rem;
  }
  
  .active {
    color: #fc6454;
  }
  
  .line {
    display: block;
    height: .04rem;
    position: absolute;
    background: #f65e56;
    z-index: 999;
    bottom: 0;
    border-radius: .8rem;
    transition: all .5s;
  }
</style>
{%endblock%} {% block content %}
{% import "test.html" as comicItem %}
<div class="fz16 home">
  {% for item in data.book %}
  <div class="content">
    <div class="hd">
      <div class="hd-text fz16">
        <span class="icon" ref='bg'></span>
        <span class="title">{{item.book_name}}</span>
        <span class="summary">{{item.summary}}</span>
      </div>
      <a href="/book/id={{item.book_id}}&name={{item.book_name}}">
        <div class="zymkwap ift-mantou more">更多</div>
      </a>
    </div>
    <div class="swiper-container">
      <div class="swiper-wrapper">
        {% for item in item.data %}
        <div class="swiper-slide">
          {{ comicItem.field('spCss',item) }}
        </div>
        {% endfor %}
      </div>
    </div>
  </div>
  {% endfor %}
  <ul class="tab-title-container">
    {%for item in ['人气榜', '打赏榜', '月票榜']%}
    <li class="tab-title zymkwap"><span>{{item}}</span></li>
    {% endfor %}
    <span id="line" class="line"></span>
  </ul>
  <div class="swiper-container-tab">
    <div class="swiper-wrapper">
      <div class="swiper-slide">
        <div class="tab-content-container">
          {% for item in data.hot_List %}
          <a class="item" href="/detail?comic_id={{item.comic_id}}">
            <img src='{{item.src}}' class="thumbnail" />
            <span class="title">{{item.comic_name}}</span>
            <div class="tags-box">{% for v in item.comic_type %}<span class="tags">{{v.name}}</span>{% endfor %}</div>
            <span class="zymkwap ift-fire count">人气值: {{item.orderby}}</span>
            <span class="num">{% if loop.index > 9 %}{% else %}0{% endif%}{{loop.index}}</span>
          </a>
          {% endfor %}
        </div>
      </div>
      <div class="swiper-slide">
        <div class="tab-content-container">
          {% for item in data.gold_list %}
          <a class="item" href="/detail?comic_id={{item.comic_id}}">
            <img src='{{item.src}}' class="thumbnail" />
            <span class="title">{{item.comic_name}}</span>
            <div class="tags-box">{% for v in item.comic_type %}<span class="tags">{{v.name}}</span>{% endfor %}</div>
            <span class="zymkwap ift-fire count">共被打赏: {{item.orderby}}个金币</span>
            <span class="num">{% if loop.index > 9 %}{% else %}0{% endif%}{{loop.index}}</span>
          </a>
          {% endfor %}
        </div>
      </div>
      <div class="swiper-slide">
        <div class="tab-content-container">
          {% for item in data.month_ticket_list %}
          <a class="item" href="/detail?comic_id={{item.comic_id}}">
            <img src='{{item.src}}' class="thumbnail" />
            <span class="title">{{item.comic_name}}</span>
            <div class="tags-box">{% for v in item.comic_type %}<span class="tags">{{v.name}}</span>{% endfor %}</div>
            <span class="zymkwap ift-fire count">月票数: {{item.orderby}}</span>
            <span class="num">{% if loop.index > 9 %}{% else %}0{% endif%}{{loop.index}}</span>
          </a>
          {% endfor %}
        </div>
      </div>
    </div>
  </div>
</div>




</div>
{% endblock %} {% block script %}
<script src="../../../static/js/common/jquery.min.js"></script>
<script src="../../../static/js/common/swiper-3.4.2.jquery.min.js"></script>
<script>
  var swiper = new Swiper('.swiper-container', {
    slidesPerView: 'auto',
    slidesOffsetBefore: 12.5,
    freeMode: true,
    freeModeMomentum: true,
    observer: true, //修改swiper自己或子元素时，自动初始化swiper
    observeParents: true, //修改swiper的父元素时，自动初始化swiper
  })
  var tabtitle = $('.tab-title-container li');
  var line = $('#line');
  console.log(line)
  tabtitle.eq(0).addClass('active');

  function lineOffset(index) {
    line.css('width', tabtitle.eq(index).find('span').width()).css('left', tabtitle.eq(index).find('span').offset().left)
  }
  lineOffset(0);
  var swiperTab = new Swiper('.swiper-container-tab', {
    onSlideChangeEnd: function(swiperTab) {
      tabtitle.eq(swiperTab.activeIndex).addClass('active').siblings().removeClass('active');
    },
    onSlideChangeStart: function(swiperTab) {
      lineOffset(swiperTab.activeIndex);
    }
  })
  $('.tab-title-container').on('click', 'li', function() {
    let index = $(this).index();
    swiperTab.slideTo(index);
  })
</script>
{% endblock %}